<template>
  <div class="main-container">
    <div class="top-header">
      <div class="logo" v-if="false">
        <img src="http://codegen.caihongy.cn/20201114/7856ba26477849ea828f481fa2773a95.jpg">
      </div>
      <h1 class="title" v-if="true">社区团购平台</h1>
      <div class="user-area">
        <span v-if="true" class="welcome"></span>
        <span v-if="Token" class="username">{{username}}</span>
        <el-button v-if="!Token" @click="toLogin()" class="login-btn">登录/注册</el-button>
        <el-button v-if="Token" @click="logout" class="logout-btn">退出</el-button>
      </div>
    </div>

    <div class="body-container">
      <nav class="main-nav">
        <el-menu class="nav-menu" :default-active="activeIndex" :unique-opened="true" mode="horizontal" :router="true" @select="handleSelect">
          <el-image v-if="false" class="nav-logo" src="http://codegen.caihongy.cn/20201114/7856ba26477849ea828f481fa2773a95.jpg" fit="cover"></el-image>
          <el-menu-item v-for="(menu, index) in menuList" :index="index + ''" :key="index" :route="menu.url" class="nav-item">
            <i v-if="true" :class="iconArr[index]"></i>
            <span>{{menu.name}}</span>
          </el-menu-item>
          <el-menu-item :index="menuList.length + 1 + ''" @click="goMenu('/index/cart')" class="nav-item">
            <i v-if="true" class="el-icon-shopping-cart-2"></i>
            <span>购物车</span>
          </el-menu-item>
          <el-menu-item :index="menuList.length + 2 + ''" v-if="Token && notAdmin" @click="goMenu('/index/center')" class="nav-item">
            <i v-if="true" class="el-icon-user"></i>
            <span>个人中心</span>
          </el-menu-item>
        </el-menu>
      </nav>

      <div class="banner">
        <div class="carousel-container">
          <el-carousel class="carousel" trigger="click" indicator-position="inside" arrow="always" height="400px" :autoplay="true" :interval="3000" :loop="true">
            <el-carousel-item v-for="item in carouselList" :key="item.id" class="carousel-item">
              <el-image :src="baseUrl + item.value" fit="cover"></el-image>
            </el-carousel-item>
          </el-carousel>
        </div>
      </div>

      <router-view></router-view>

      <footer class="footer">
        <img class="footer-logo" src="http://codegen.caihongy.cn/20201114/7856ba26477849ea828f481fa2773a95.jpg">
        <div class="footer-text"></div>
        <div class="footer-text"></div>
        <div class="footer-text"></div>
      </footer>
    </div>

  </div>
</template>

<script>
export default {
  data() {
    return {
      activeIndex: '0',
      roleMenus: [{"backMenu":[{"child":[{"appFrontIcon":"cuIcon-brand","buttons":["新增","查看","修改","删除","报表"],"menu":"用户","menuJump":"列表","tableName":"yonghu"}],"menu":"用户管理"},{"child":[{"appFrontIcon":"cuIcon-phone","buttons":["新增","查看","修改","删除"],"menu":"商家","menuJump":"列表","tableName":"shangjia"}],"menu":"商家管理"},{"child":[{"appFrontIcon":"cuIcon-vipcard","buttons":["新增","查看","修改","删除"],"menu":"社区信息","menuJump":"列表","tableName":"shequxinxi"}],"menu":"社区信息管理"},{"child":[{"appFrontIcon":"cuIcon-paint","buttons":["查看","删除","查看评论"],"menu":"商品信息","menuJump":"列表","tableName":"shangpinxinxi"}],"menu":"商品信息管理"},{"child":[{"appFrontIcon":"cuIcon-attentionfavor","buttons":["新增","查看","修改","删除"],"menu":"商品分类","menuJump":"列表","tableName":"shangpinfenlei"}],"menu":"商品分类管理"},{"child":[{"appFrontIcon":"cuIcon-addressbook","buttons":["查看","修改","回复","删除"],"menu":"留言板管理","tableName":"messages"}],"menu":"留言板管理"},{"child":[{"appFrontIcon":"cuIcon-discover","buttons":["查看","修改","删除"],"menu":"轮播图管理","tableName":"config"},{"appFrontIcon":"cuIcon-news","buttons":["新增","查看","修改","删除"],"menu":"活动公告","tableName":"news"}],"menu":"系统管理"},{"child":[{"appFrontIcon":"cuIcon-explore","buttons":["查看","修改","删除","导出"],"menu":"已取消订单","tableName":"orders/已取消"},{"appFrontIcon":"cuIcon-medal","buttons":["查看","修改","删除","导出"],"menu":"已退款订单","tableName":"orders/已退款"},{"appFrontIcon":"cuIcon-qrcode","buttons":["查看","修改","删除","导出"],"menu":"未支付订单","tableName":"orders/未支付"},{"appFrontIcon":"cuIcon-explore","buttons":["查看","删除","修改","导出"],"menu":"已发货订单","tableName":"orders/已发货"},{"appFrontIcon":"cuIcon-explore","buttons":["修改","删除","查看","导出"],"menu":"已支付订单","tableName":"orders/已支付"},{"appFrontIcon":"cuIcon-qrcode","buttons":["查看","修改","删除","导出","日销量","月销量","品销量","日销额","月销额","品销额"],"menu":"已完成订单","tableName":"orders/已完成"}],"menu":"订单管理"}],"frontMenu":[{"child":[{"appFrontIcon":"cuIcon-qrcode","buttons":["查看"],"menu":"商品信息列表","menuJump":"列表","tableName":"shangpinxinxi"}],"menu":"商品信息模块"}],"hasBackLogin":"是","hasBackRegister":"否","hasFrontLogin":"否","hasFrontRegister":"否","roleName":"管理员","tableName":"users"},{"backMenu":[],"frontMenu":[{"child":[{"appFrontIcon":"cuIcon-qrcode","buttons":["查看"],"menu":"商品信息列表","menuJump":"列表","tableName":"shangpinxinxi"}],"menu":"商品信息模块"}],"hasBackLogin":"否","hasBackRegister":"否","hasFrontLogin":"是","hasFrontRegister":"是","roleName":"用户","tableName":"yonghu"},{"backMenu":[{"child":[{"appFrontIcon":"cuIcon-paint","buttons":["新增","查看","修改","删除","查看评论"],"menu":"商品信息","menuJump":"列表","tableName":"shangpinxinxi"}],"menu":"商品信息管理"},{"child":[{"appFrontIcon":"cuIcon-explore","buttons":["查看","删除","发货","物流","导出"],"menu":"已支付订单","tableName":"orders/已支付"},{"appFrontIcon":"cuIcon-qrcode","buttons":["查看","删除","日销量","月销量","品销量","月销额","日销额","品销额","导出"],"menu":"已完成订单","tableName":"orders/已完成"},{"appFrontIcon":"cuIcon-explore","buttons":["查看","删除","导出"],"menu":"已取消订单","tableName":"orders/已取消"},{"appFrontIcon":"cuIcon-medal","buttons":["查看","删除","导出"],"menu":"已退款订单","tableName":"orders/已退款"},{"appFrontIcon":"cuIcon-qrcode","buttons":["查看","删除","导出"],"menu":"未支付订单","tableName":"orders/未支付"},{"appFrontIcon":"cuIcon-explore","buttons":["查看","删除","物流","导出"],"menu":"已发货订单","tableName":"orders/已发货"}],"menu":"订单管理"}],"frontMenu":[{"child":[{"appFrontIcon":"cuIcon-qrcode","buttons":["查看"],"menu":"商品信息列表","menuJump":"列表","tableName":"shangpinxinxi"}],"menu":"商品信息模块"}],"hasBackLogin":"是","hasBackRegister":"是","hasFrontLogin":"否","hasFrontRegister":"否","roleName":"商家","tableName":"shangjia"}],
      baseUrl: '',
      carouselList: [],
      menuList: [],
      form: {
        ask: '',
        userid: localStorage.getItem('userid')
      },
      Token: localStorage.getItem('Token'),
      username: localStorage.getItem('username'),
      notAdmin: localStorage.getItem('sessionTable')!='"users"',
      timer: '',
      iconArr: [
        'el-icon-star-off',
        'el-icon-goods',
        'el-icon-warning',
        'el-icon-question',
        'el-icon-info',
        'el-icon-help',
        'el-icon-picture-outline-round',
        'el-icon-camera-solid',
        'el-icon-video-camera-solid',
        'el-icon-video-camera',
        'el-icon-bell',
        'el-icon-s-cooperation',
        'el-icon-s-order',
        'el-icon-s-platform',
        'el-icon-s-operation',
        'el-icon-s-promotion',
        'el-icon-s-release',
        'el-icon-s-ticket',
        'el-icon-s-management',
        'el-icon-s-open',
        'el-icon-s-shop',
        'el-icon-s-marketing',
        'el-icon-s-flag',
        'el-icon-s-comment',
        'el-icon-s-finance',
        'el-icon-s-claim',
        'el-icon-s-opportunity',
        'el-icon-s-data',
        'el-icon-s-check'
      ],
    }
  },
  created() {
    this.baseUrl = this.$config.baseUrl;
    this.menuList = this.$config.indexNav;
    this.getCarousel();
  },
  mounted() {
    this.activeIndex = localStorage.getItem('keyPath') || '0';
  },
  watch: {
    $route(newValue) {
      let url = window.location.href
      let arr = url.split('#')
      for (let x in this.menuList) {
        if (newValue.path == this.menuList[x].url) {
          this.activeIndex = x
        }
      }
      this.Token = localStorage.getItem('Token')
    },
  },
  methods: {
    handleSelect(keyPath) {
      if (keyPath) {
        localStorage.setItem('keyPath', keyPath)
      }
    },
    toLogin() {
      this.$router.push('/login');
    },
    logout() {
      localStorage.clear();
      this.$router.push('/index/home');
      this.activeIndex = '0'
      localStorage.setItem('keyPath', this.activeIndex)
      this.Token = ''
      this.$forceUpdate()
      this.$message({
        message: '登出成功',
        type: 'success',
        duration: 1000,
      });
    },
    getCarousel() {
      this.$http.get('config/list', {params: { page: 1, limit: 3 }}).then(res => {
        if (res.data.code == 0) {
          this.carouselList = res.data.data.list;
        }
      });
    },
    goMenu(path) {
      if (!localStorage.getItem('Token')) {
        this.toLogin();
      } else {
        this.$router.push(path);
      }
    },
  }
}
</script>

<style lang="scss" scoped>
.main-container {
  width: 100%;
  min-height: 100vh;
  background: #f5f5f5;
}

.top-header {
  height: 75px;
  background: #fff;
  padding: 0 50px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);

  .logo img {
    width: 44px;
    height: 44px;
    border-radius: 50%;
  }

  .title {
    font-size: 24px;
    color: #0660ac;
    font-weight: bold;
    margin: 0;
  }

  .user-area {
    display: flex;
    align-items: center;
    gap: 15px;

    .username {
      color: #666;
      font-size: 14px;
    }

    .login-btn {
      background: linear-gradient(45deg, #e6a23c, #f56c6c);
      border: none;
      color: white;
      padding: 0 30px;
      height: 36px;
      
      &:hover {
        opacity: 0.9;
      }
    }

    .logout-btn {
      border: 1px solid #1170d2;
      color: #1170d2;
      padding: 0 30px;
      height: 36px;
      
      &:hover {
        background: #f5f7fa;
      }
    }
  }
}

.main-nav {
  background: linear-gradient(90deg, #ffa100, #f56c6c);

  .nav-menu {
    border: none;
    background: transparent;

    .nav-item {
      color: white;
      height: 56px;
      line-height: 56px;
      padding: 0 20px;
      
      &:hover, &.is-active {
        background: rgba(255,255,255,0.1);
      }

      i {
        color: white;
        margin-right: 5px;
      }

      span {
        color: white;
      }
    }
  }
}

.banner {
  display: flex;
  justify-content: center;
  padding: 20px 0;

  .carousel-container {
    width: 80%;
    max-width: 1200px;
    
    .carousel {
      .carousel-item {
        .el-image {
          width: 100%;
          height: 100%;
          object-fit: cover;
          border-radius: 8px;
        }
      }
    }
  }
}

.footer {
  min-height: 150px;
  background: #333;
  padding: 20px 0;
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  .footer-logo {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    margin-bottom: 15px;
    display: none;
  }

  .footer-text {
    color: white;
    font-size: 14px;
    line-height: 28px;
    margin: 5px 0;
  }
}
</style>
